<template>
  <Temp @clear="clear" @close="close">
    <div class="measure">
      <el-upload
        action="#"
        class="upload-demo"
        :show-file-list="false"
        :http-request="uploadParse"
        accept=".zip,.dwg"
      >
        <el-button size="small" type="primary">
          <i
            class="el-icon-upload"
            style="font-size: 20px"
          />
          <span style="line-height: 16px"
            >点击上传</span
          ></el-button
        >
      </el-upload>
    </div>
  </Temp>
</template>

<script>
import Temp from '../temp'
import { getAction } from '@/utils/helper'
import { Loading } from 'element-ui'
import { mapParseGeojson } from '@/api/tree'

let loadingInstance

export default {
  name: 'index',
  components: {
    Temp
  },
  inject: ['viewerId'],
  data() {
    return {
      layerManager: ''
    }
  },
  async created() {
    const { layerManager } = await getAction(this.viewerId)
    this.layerManager = layerManager
  },
  methods: {
    close() {
      this.$emit('close')
      this.clear()
    },
    clear() {
      this.layerManager.geoJson()
    },
    uploadParse(params) {
      console.log(params)
      const file = params.file
      const fileExtensionName = file.name.substring(
        file.name.lastIndexOf('.') + 1
      )
      const parse = new FormData()
      this.showLoading()
      parse.append('file', file)
      mapParseGeojson(
        fileExtensionName === 'dwg' ? 'dwg' : 'shp',
        parse
      )
        .then((res) => {
          if (res.success) {
            this.layerManager.geoJson(res.data)
          } else {
            this.$message.error(res.message)
          }
          this.hideLoading()
        })
        .catch(() => {
          this.hideLoading()
        })
    },
    showLoading() {
      if (!loadingInstance) {
        loadingInstance = Loading.service({
          fullscreen: true
        })
        console.log('show loading')
      }
    },
    hideLoading() {
      if (loadingInstance) {
        this.$nextTick(() => {
          loadingInstance.close()
          loadingInstance = null
          console.log('hide loading')
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.measure::v-deep {
  .el-button {
    background-color: rgba(25, 59, 81, 1) !important;
    border-color: rgba(25, 59, 81, 1) !important;
    font-size: 14px !important;
    color: rgb(210, 230, 240) !important;
  }
}
</style>
